<template>
    <el-table-column prop="method" label="Method" min-width="120">
        <template #header>
            <p class="mp_flex">
                Method
                <el-popover placement="right" :width="304" trigger="hover"
                    content="Function executed based on decoded input data. For unidentified functions, method ID is displayed instead.">
                    <template #reference>
                        <span class="le_div">
                            <el-icon color="#aaa">
                                <QuestionFilled />
                            </el-icon>
                        </span>
                    </template>
                </el-popover>
            </p>
        </template>
        <template #default="scope">
            <el-tooltip class="item" effect="dark" :hide-after="0"
                :content="scope.row.method || scope.row.action || 'transfer'" placement="top">
                <p :class="((method && (method == scope.row.method || method == scope.row.action)) || (method == ' ' && !scope.row.method)) ? 'p_method p_method_ups' : 'p_method'"
                    @mouseenter="method = (scope.row.method ? scope.row.method : (scope.row.action || ' '))"
                    @mouseout="method = null">
                    <span>{{ scope.row.method || (scope.row.action || 'transfer') }}</span>
                </p>
            </el-tooltip>
        </template>
    </el-table-column>
</template>

<script>
import { QuestionFilled } from '@element-plus/icons-vue'
export default {
    props: ['scope'],
    data() {
        return {
            method: null,
        }
    },
    mounted() {
    },
    methods: {

    },
    components: {
        QuestionFilled
    }
}
</script>

<style lang="less" scopeds>
.mp_flex {
    display: flex;
    align-items: center;
    gap: 5px;
}

.le_div {
    padding-top: 5px;
}

.copy_box {
    display: flex;
    align-items: center;
}

.p_method {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    display: flex;
    text-align: center;
    cursor: pointer;

    span {
        border-radius: .4rem;
        min-width: 100px;
        font-size: 0.75rem;
        padding: .1rem 0;
        background: rgba(52, 152, 219, 0.1);
        border: 1px solid transparent;
    }
}

.p_method span:hover,
.p_method_ups span {
    background: rgba(230, 140, 0, 0.10);
    border: 1px dashed rgba(230, 140, 0, 0.50);
}
</style>